import { useNavigate, useParams } from "react-router";
import { Button } from "antd";
/**. Params 方式 (/user/:id)
适用于：传递必要的路径参数（如ID）
特点：符合 RESTful 规范，刷新不丢失
限制：只能传字符串，参数显示在URL中
 * 
 * @returns 
 */

export default function RouteParam() {
  const navigate = useNavigate();
  const { id } = useParams();
  console.log("id==>", id);

  return (
    <div>
      <h1>RouteQuery</h1>
      <p>query参数</p>
      <p>
        query参数是URL中?后面的参数，例如：http://localhost:3000/routeQuery?name=张三&age=18
      </p>
      <p>通过 useNavigate 跳转，useParams 获取</p>

      <Button onClick={() => navigate("/routeQuery?name=小鱼&age=18")}>
        跳转到query
      </Button>

      <Button onClick={() => navigate("/routeAsync?name=小鱼&age=18")}>
        跳转到routeAsync
      </Button>
    </div>
  );
}
